﻿function prepareCanvas(id) {
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 800);
    canvas.setAttribute('height', 800);
    document.getElementById(id).appendChild(canvas);
    
    return canvas;
};

//www.senchalabs.org/philogl/PhiloGL/examples/lessons/1/

function webGLStart(id) {
    var canvas = prepareCanvas(id);
    PhiloGL(canvas, {
        program: {
            from: 'ids',
            vs: 'shader-vs',
            fs: 'shader-fs'
        },

        onError: function () {
            alert("An error ocurred while loading the application");
        },

        onLoad: function (app) {
            var gl = app.gl,
                canvas = app.canvas,
                program = app.program,
                camera = app.camera;

            gl.clearColor(1, 0, 0, 1);
            gl.clearDepth(1);
            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.viewport(0, 0, canvas.width, canvas.height);

            program.setBuffers({
                'triangle': {
                    attribute: 'aVertexPosition',
                    value: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]),
                    size: 3
                },

                'square': {
                    attribute: 'aVertexPosition',
                    value: new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0]),
                    size: 3
                }
            });

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            camera.view.id();

            //Draw Triangle
            camera.view.$translate(-1.5, 0, -7);
            program.setUniform('uMVMatrix', camera.view);
            program.setUniform('uPMatrix', camera.projection);
            program.setBuffer('triangle');
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            //Draw Square
            camera.view.$translate(3, 0, 0);
            program.setUniform('uMVMatrix', camera.view);
            program.setUniform('uPMatrix', camera.projection);
            program.setBuffer('square');
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    });
}